<template>
  <div style="background-color: #f2f2f2">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-card class="box-card">
          <!-- 类型列表 -->
          <ul class="type">
            <li
              @click="handleType(index, item.id)"
              :class="active == index ? 'active' : ''"
              v-for="(item, index) in typeTableData"
              :key="index"
            >
              {{ item.name }}
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="20">
        <el-card class="box-card">
          <!-- 操作按钮区域 -->
          <div class="btn-panel">
            <el-button
              type="success"
              size="small"
              icon="el-icon-plus"
              @click="create"
              >添加字典</el-button
            >
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="deleteMany"
              >批量删除</el-button
            >
          </div>
          <!-- 字典列表 -->
          <Table1
            :tableData="dictTableData"
            :tableCols="dictTableCols"
            @deleteUser="del"
            @showEditView="showEditView"
            ref="multipleTable"
          >
            <template slot="slot_status" slot-scope="scope">
              <el-tag size="mini" type="success" v-if="scope.data.status == 0">
                正常
              </el-tag>
              <el-tag size="mini" type="danger" v-else> 停用 </el-tag>
            </template>
          </Table1>
        </el-card>
        <Add v-if="add.visible" :param="add" :typeId="selectTypeId"> </Add>
        <Edit v-if="edit.visible" :param="edit"></Edit>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Table1 from "@/components/Table1";
import Add from "./Add";
import Edit from "./Edit";
export default {
  name: "Dict",
  components: {
    Table1,
    Add,
    Edit,
  },
  data() {
    return {
      // 类型
      typeTableData: [],
      active: 0,
      selectTypeId: 1,

      // 字典
      dictTableData: [],
      dictTableCols: [
        { prop: "dict_key", label: "字典名称" },
        { prop: "dict_val", label: "字典的值" },
        { prop: "sort", label: "序号", width: "100" },
        {
          prop: "status",
          label: "状态",
          slot: "slot_status",
        },
      ], //表格的列

      // 添加组件
      add: {
        visible: false,
        close: this.close,
        callback: this.dictList,
      },

      //  编辑组件
      edit: {
        visible: false,
        close: this.close,
        callback: this.dictList,
        editForm: null,
      },

      // 选择的列
      selection: {},

      total: 0,
      pages: 1,
      currentPage: 1,
      size: 10,
    };
  },
  mounted() {
    this.typeList();
    this.dictList();
    this.selection = this.$refs["multipleTable"].selection;
  },
  methods: {
    // 类型初始化
    typeList() {
      this.getRequest("/type/page").then((res) => {
        if (res) {
          this.typeTableData = res.data;
          this.selectTypeId = this.typeTableData[0].id;
          console.log(this.selectTypeId, "类型初始化");
        }
      });
    },
    // 选中类型事件
    handleType(index, type_id) {
      this.active = index;
      this.selectTypeId = type_id;
      this.dictList();
      console.log(this.selectTypeId, "选择事件");
    },
    // 字典初始化
    dictList() {
      let type_id = this.selectTypeId;
      let url = "/dict/query/?type_id=" + type_id;
      this.postRequest(url).then((res) => {
        if (res) {
          this.dictTableData = res;
          console.log(this.dictTableData, "this.dictTableData======");
        }
      });
    },
    // 新增字典
    create() {
      this.add.visible = true;
    },
    // 关闭
    close() {
      this.edit.visible = false;
      this.add.visible = false;
    },
    // 批量删除
    deleteMany() {
      this.selection = this.$refs["multipleTable"].selection;
      if (this.selection.length == 0) {
        this.$message.warning("请选择后再删除");
        return;
      }
      this.$confirm(
        "此操作将永久删除 [" + this.selection.length + "]个字典, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let ids = "?";
          this.selection.forEach((item) => {
            ids += "ids=" + item.id + "&";
          });
          console.log(ids, "ids===");
          this.deleteRequest("/dict/" + ids).then((res) => {
            if (res) {
              this.$message.success(res.message);
              this.dictList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除单个
    del(data) {
      console.log(data.id, "删除");
      this.$confirm(
        "此操作将永久删除用户：[" + data.dict_val + "], 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.deleteRequest("/dict/" + data.id).then((res) => {
            if (res) {
              this.$message.success(res.message);
              this.dictList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //  点击编辑
    showEditView(data) {
      console.log(data, "编辑编辑");
      this.edit.visible = true;
      this.edit.editForm = data;
      console.log(this.edit.editForm);
    },
  },
};
</script>
<style scoped>
.type {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.type li {
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 14px;
}
.type .active {
  background-color: #0392c2;
  border-radius: 15px;
  color: #fff;
  transition: background-color 0.5s;
}
</style>
